<template>
	<view>
		<view class="content">
			<view>
				<view class="text-left margin-top">
					<text class="text-lg margin">{{ tenantName }}</text>
				</view>
				<view class="top-content margin-top">
					<view v-for="(item, index) in list" :key="index" @click="handleClick(item)">
						<view class="top-content-item">
							<image :src="item.icon" class="top-content-item-icon"></image>
							<text class="top-content-item-icon-text">{{ item.name }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="middle-banner-centent">
				<image class="middle-banner" src="/static/images/banner/home_middle_banner.png" />
			</view>
			<view class="tip">
				<view class="tip-blue"></view>
				<text class="tip-text">汇总</text>
			</view>
			<view class="summery-content">
				<view v-for="(item, index) in summery_list" :key="index.name" class="summery-content-item" @click="handleClickHZ(item)">
					<image :src="item.icon" class="summery-content-item-icon"></image>
					<view class="summery-content-item-text">
						<text class="summery-content-item-text-title">{{ item.name }}</text>
						<text class="summery-content-item-text-normal">{{ getSummeryCardNumText(item.name) }}</text>
					</view>
				</view>
			</view>
			<title-bar
				haveTip
				haveRightCell
				:incompletedNumber="incompletedNumber"
				:completedNumber="completedNumber"
				:tabIndex="tabIndex"
				rightText="全部"
				@handleListBarTitleClick="titleClick"
				@handleNextContentClick="goToNext"
				noTab
				rightIcon
			/>
			<view style="padding-bottom: 100px">
				<view v-if="policeList.length">
					<device-list-item
						:key="index"
						v-for="(policeItem, index) in policeList"
						:policeItem="policeItem"
						@deviceInfoClick="deviceInfoClick(policeItem)"
						@dealRecordClick="dealRecordClick(policeItem)"
						@dealPolice="dealPolice(policeItem)"
						@deviceListItemClick="deviceListItemClick(policeItem)"
					/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import authMixin from '@/mixin/auth.js';
import { getHomeDeviceInfo, handleThreeDaysPage } from '@/api/home';
export default {
	mixins: [authMixin],
	data() {
		return {
			tabIndex: '0',
			policeList: [],
			list: [
				{
					id: 1,
					name: '建筑物',
					icon: '/static/images/home/building_mag.png',
					showauth: this.auth('thing:building:query')
				},
				{
					id: 2,
					name: '设备数量',
					icon: '/static/images/home/devices_mag.png',
					showauth: this.auth('thing:building-device:query')
				},
				{
					id: 3,
					name: '报警记录',
					icon: '/static/images/home/alarm_record.png',
					showauth: this.auth('thing:handle:query')
				},
				{
					id: 4,
					name: '资产管理',
					icon: '/static/images/home/cost_mag.png',
					// showauth: this.auth('pay:order:query')
					showauth: true
				}
			],
			today_Install: 0,
			devices_number: 0,
			building: 0,
			today_police: 0,
			incompletedNumber: 0,
			completedNumber: 0,

			summery_list: [
				{
					id: 1,
					name: '今日报警',
					icon: '/static/images/home/today_police.png',
					showauth: this.auth('thing:handle:query')
				},
				{
					id: 2,
					name: '设备数量',
					icon: '/static/images/home/devices_number.png',
					showauth: this.auth('thing:building-device:query')
				},
				{
					id: 3,
					name: '建筑物',
					icon: '/static/images/home/building.png',
					showauth: this.auth('thing:building:query')
				},
				{
					id: 4,
					name: '今日安装',
					icon: '/static/images/home/today_Install.png',
					showauth: this.auth('thing:building-device:query')
				}
			]
		};
	},
	computed: {
		tenantName() {
			return this.$store.state.user.tenantName;
		}
	},
	onShow() {
		handleThreeDaysPage({
			size: 5,
			pages: 1
		}).then((res) => {
			const data = res.data; // 读取 data 数据
			console.log('res>>>>', data);
			this.policeList = data.records || [];
		});
	},
	onLoad() {
		getHomeDeviceInfo().then((res) => {
			const data = res.data; // 读取 data 数据
			console.log('res>>>>', res);
			this.today_Install = data.todayInstallDeviceTotal;
			this.devices_number = data.deviceTotal;
			this.building = data.buildingTotal;
			this.today_police = data.todayAlarmTotal;
		});
		// uni.stopPullDownRefresh();
		
		// uni.$on('refresh-police-list', () => {
		// 	setTimeout(() => {
		// 		uni.startPullDownRefresh();
		// 	}, 1000);
		// });
		//   this.setTabBarByAuth()
	},

	onPullDownRefresh() {
		Promise.all([
			getHomeDeviceInfo(),
			handleThreeDaysPage({
				size: 5,
				pages: 1
			})
		])
			.then(([data1, data2]) => {
				const today_Install = data1.data.todayInstallDeviceTotal;
				const devices_number = data1.data.deviceTotal;
				const building = data1.data.buildingTotal;
				const today_police = data1.data.todayAlarmTotal;

				const policeList = data2.data.records || [];

				this.today_Install = today_Install;
				this.devices_number = devices_number;
				this.building = building;
				this.today_police = today_police;
				this.policeList = policeList;

				uni.stopPullDownRefresh();
			})
			.catch((error) => {
				console.error('Error in onPullDownRefresh', error);
			});
	},
	methods: {
		//   setTabBarByAuth(){
		//     if(!this.auth('thing:building-device:query')){  //设备分页查询 去掉设备权限
		//       uni.setTabBarItem({
		//         index:1,
		//         visible:false
		//       })
		//     }
		//     if(!this.auth('thing:handle:query')){  //thing:responder:query 去掉接警人权限
		//       //todo 需要在某个地方添加扫描添加设备的地方
		//       uni.setTabBarItem({
		//         index:2,
		//         visible:false
		//       })
		//     }
		//   },
		handleClickHZ(item) {
			if (!item.showauth) {
				uni.showToast({
					icon: 'error',
					title: '无权限'
				});
				return;
			}
			if (item.id === 1) {
				this.$tab.reLaunch('/pages/police/index');
			}
			if (item.id === 2) {
				this.$tab.reLaunch('/pages/devices/index');
			}
			if (item.id === 3) {
				uni.navigateTo({ url: '/pages/mine/building/index' });
			}
			if (item.id === 4) {
				//   uni.navigateTo({url:'/pages/mine/tariff-manage/tariff-manage'})
				this.$tab.reLaunch('/pages/devices/index');
			}
		},
		handleClick(item) {
			if (!item.showauth) {
				uni.showToast({
					icon: 'error',
					title: '无权限'
				});
				return;
			}

			if (item.id === 1) {
				uni.navigateTo({ url: '/pages/mine/building/index' });
			}
			if (item.id === 2) {
				this.$tab.reLaunch('/pages/devices/index');
			}
			if (item.id === 3) {
				this.$tab.reLaunch('/pages/police/index');
			}
			if (item.id === 4) {
				uni.navigateTo({ url: '/pages/mine/tariff-manage/tariff-manage' });
			}
		},
		getSummeryCardNumText(name) {
			let numText = '0';
			switch (name) {
				case '今日报警':
					numText = this.today_police + ' 次';
					break;
				case '设备数量':
					numText = this.devices_number + ' 台';
					break;
				case '建筑物':
					numText = this.building + ' 座';
					break;
				case '今日安装':
					numText = this.today_Install + ' 次';
					break;
				default:
					break;
			}
			return numText;
		},
		titleClick(data) {
			this.tabIndex = data;
		},
		goToNext() {
			this.$tab.reLaunch('/pages/police/index');
		},
		deviceListItemClick(policeItem) {
			console.log('policeItem>>>', policeItem);
			uni.navigateTo({
				url: '/pages/police/police-detail/police-detail?data=' + encodeURIComponent(JSON.stringify(policeItem))
			});
		},
		deviceInfoClick(policeItem) {
			console.log('policeItem>>>', policeItem);
			uni.navigateTo({
				url: `/pages/devices/detail/index?deviceId=${policeItem.deviceId}`
			});
		},
		dealRecordClick(policeItem) {
			console.log('policeItem>>>', policeItem);
			//处理结果
			uni.navigateTo({
				url: `/pages/police/police-res/police-res?data=` + encodeURIComponent(JSON.stringify(policeItem))
			});
		},
		dealPolice(policeItem) {
			console.log('policeItem>>>', policeItem);
			uni.navigateTo({
				url: `/pages/police/police-deal/police-deal?data=` + encodeURIComponent(JSON.stringify(policeItem))
			});
			uni.$once('refresh-handle-create', () => {
				uni.startPullDownRefresh();
			});
		}
	}
};
</script>

<style scoped>
.topTile {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	margin-left: 10rpx;
	margin-right: 10rpx;
	width: 710rpx;
	min-height: 100rpx;
}

.tip-blue {
	margin-right: 10rpx;
	height: 30rpx;
	width: 6rpx;
	border-radius: 2rpx;
	background-color: #1654ff;
}

.tip-text {
	font-size: 30rpx;
	font-weight: 300rpx;
}

.tip {
	margin-top: 20rpx;
	/* margin-bottom: 0rpx; */
	width: 750rpx;
	height: 40rpx;
	align-items: center;
	padding-left: 25rpx;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.top-content {
	background-color: rgba(255, 255, 255, 0.6);
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	border-radius: 10rpx;
	/* box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1); */
	box-shadow: none;
	margin-left: 10rpx;
	margin-right: 10rpx;
	width: 710rpx;
	min-height: 180rpx;
}
.top-content-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 160rpx;
	font-size: 10rpx;
}
.top-content-item-icon {
	height: 60rpx;
	width: 60rpx;
	margin-bottom: 8rpx;
}

.top-content-item-icon-text {
	font-size: 12px;
}

.summery-content {
	display: flex;
	width: 100%;
	padding-left: 15rpx;
	padding-right: 15rpx;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-around;
	min-height: 360rpx;
}

.summery-content-item {
	margin-top: 20rpx;
	box-shadow: none;
	/* box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1); */
	border-radius: 10rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	height: 160rpx;
	width: 40%;
	font-size: 10rpx;
}

.summery-content-item-text {
	display: flex;
	height: 80rpx;
	justify-content: space-between;
	flex-direction: column;
	margin-left: 10rpx;
}

.summery-content-item-text-title {
	font-weight: bold;
	color: #333333;
	font-size: 28rpx;
}

.summery-content-item-text-normal {
	font-weight: normal;
	font-size: 24rpx;
}

.summery-content-item-icon {
	margin-right: 20rpx;
	height: 56rpx;
	width: 56rpx;
}

.middle-banner-centent {
	margin-top: 40rpx;
	width: 100%;
	padding-left: 15rpx;
	padding-right: 15rpx;
}

.middle-banner {
	width: 100%;
	max-height: 160rpx;
	min-height: 100rpx;
	border-radius: 14rpx;
}

.content {
	padding-top: 20px;
	padding-bottom: calc(var(--window-bottom) + 20px);
	display: flex;
	flex-direction: column;
	align-items: center;
	/* justify-content: center; */
	/* height:100% */
	background-image: linear-gradient(to bottom, #add8e6, #fff);
}

.summery-content > :nth-child(1) {
	background-color: rgba(255, 247, 249, 0.7);
}

.summery-content > :nth-child(2) {
	background-color: rgba(236, 255, 255, 0.7);
}

.summery-content > :nth-child(3) {
	background-color: rgba(236, 241, 255, 0.7);
}

.summery-content > :nth-child(4) {
	background-color: rgba(255, 245, 230, 0.7);
}
</style>
